import { Component } from "react";
import { bound } from "./data";
import { genBoundStatistical } from "./options";
import Echarts from "echarts-for-react";

class RightChart extends Component {
    render() {
        let fo = setOption(getOption(), genBoundStatistical(bound));
        return (
            <Echarts
                style={{
                    width: "100%",
                    height: "100%"
                }}
                option={fo}
                notMerge={true}
                lazyUpdate={true}
            />
        );
    }

}

function getOption() {
    return {
        backgroundColor: 'transparent',
        tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(255,255,255,0.80)',
            borderColor: '#F1F1F1',
            borderWidth: 1,
            padding: [8, 16],
            textStyle: {
                color: '#666',
                fontSize: 10,
            },
            extraCssText: 'box-shadow:0 1px 4px 0 rgba(0,0,0,0.20);border-radius:4px;',
            formatter: '',
        },
        grid: {
            top: '50px',
            left: '0',
            right: '0',
            bottom: '0',
            containLabel: true,
        },
        xAxis: {
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                textStyle: {
                    fontSize: 10,
                    color: '#666',
                },
            },
            type: 'category',
            boundaryGap: true,
        },
        yAxis: {
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                textStyle: {
                    fontSize: 10,
                    color: '#666',
                },
            },
            splitLine: {
                lineStyle: {
                    color: '#f1f1f1',
                },
            },
            type: 'value',
        },
    };
}

function setOption(option, data) {
    // 初始化时使用赋值语句（如series）给定没有的默认值
    // 使用...可以取出剩余部分
    const { tooltip, xAxis, yAxis, yCategory, series = [], ...rest } = data;
    return {
        ...option,
        xAxis: {
            ...option.xAxis,
            ...xAxis,
        },
        tooltip: {
            ...option.tooltip,
            ...tooltip,
        },
        yAxis: {
            ...option.yAxis,
            ...yAxis,
            data: yCategory || [],
        },
        series: seriesCreator(series),
        ...rest,
    };
}

function seriesCreator(series) {
    return series.map(e => ({
        type: 'line',
        symbol: 'circle',
        smooth: true,
        lineStyle: {
            normal: {
                width: 3,
            },
        },
        ...e,
    }));
}


export default RightChart;
